<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>护照信息</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			body {
				background-color: #FFFFFF;
			}
			.mui-content {
				background-color: #FFFFFF;
			}
			.info-div {
				width: 100%;
				background-color: #FFFFFF;
			}
			.item-div {
				margin: 0px 28px;
				height: 55px;
				position: relative;
			}
			.item-span {
				line-height: 55px;
				font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #666666;
			}
			.item-icon {
				width: 20px;
				height: 20px;
				position: absolute;
				right: 0px;
				top: 22px;
			}
			.line-div {
				width: 100%;
				height: 1px;
				background-color: #F3F3F3;
			}
			input[type=text] {
				padding: 0px;
			    float: right;
	    			width: 70%;
				margin-bottom: 0;
				height: 55px; 
				border-width: 0px;
				color:#515151;
				font-size: 15px;
				background-color: transparent;
			}
			::-webkit-input-placeholder{
			    font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #999999;
			}
			.right-div-container {
				display: inline-block;
				float: right;
				width: 70%;
			}
			.right-div {
				display: inline-block;
				float: right;
			}
			.right-span {
				line-height: 55px;
				font-size: 14px;
				color: #999999;
			}
			.choose-img {
				width: 32px;
				height: 32px;
				margin-top: 8px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">护照信息</h1>
		</header>
		<div class="mui-content">
			<div class="info-div">
				<div class="item-div">
					<span class="item-span">护照类别</span>
					<div id="passportType" class="right-div-container">
						<input type="hidden" id="passportTypeInput" />
						<span class="right-span passportResult">请选择</span>
						<div class="right-div">
							<img class="choose-img" src="../img/detail/down_color_icon.png" />
						</div>
					</div>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">护照号码</span>
					<input type="text" id="passportNumber" placeholder="请输入护照号码"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">签发日期</span>
					<div class="right-div-container datePicker" data-options='{"type":"date","beginYear":1900,"endYear":2100}'>
						<span class="right-span dateResult issueTime">请选择日期</span>
						<div class="right-div">
							<img class="choose-img" src="../img/detail/down_color_icon.png" />
						</div>
					</div>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">有效期至</span>
					<div class="right-div-container datePicker" data-options='{"type":"date","beginYear":1900,"endYear":2100}'>
						<span class="right-span dateResult validTime">请选择日期</span>
						<div class="right-div">
							<img class="choose-img" src="../img/detail/down_color_icon.png" />
						</div>
					</div>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">签发地点</span>
					<input type="text" id="issuePlace" placeholder="请输入签发地"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">签发机关</span>
					<input type="text" id="issuingAuthority" placeholder="请输入签发机关"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">签发机关英文</span>
					<input type="text" id="issuingAuthorityEnglish" placeholder="请输入签发机关英文名"/>
				</div>
				<div class="line-div"></div>
			</div>
			<div class="transaction-container"><button type="button">保存</button></div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.min.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		var applyCustomerId = base.getParameter("applyCustomerId");
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		(function($, doc) {
			$.init();
			getPassportInfo();//获取家庭信息
			//学历
			var passportPicker = new $.PopPicker();
			passportPicker.setData([{
				value: '1',
				text: '外交'
			}, {
				value: '2',
				text: '公务'
			}, {
				value: '3',
				text: '普通'
			}, {
				value: '4',
				text: '其它'
			}]);
			$(".info-div").on('tap', '#passportType', function(e){
				var _self = this;
				passportPicker.show(function(items) {
					jQuery("#passportTypeInput").html(_getParam(items[0], "value"));
					jQuery(_self).find(".passportResult").html(_getParam(items[0], "text"));
				});
			});
			$(".info-div").on('tap', '.datePicker',function(e) {
				var _self = this;
				if(_self.picker) {
					_self.picker.show(function (rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					_self.picker = new $.DtPicker(options);
					_self.picker.show(function(rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				}
			}, false);
		})(mui, document);
		function getPassportInfo() {
			base.setWait('正在获取数据');
			var url = base.url.getPassportInfo;
			base.postData(url, {applyCustomerId: applyCustomerId}, getPassportInfoSuccess);
		}
		function getPassportInfoSuccess(data) {
			if (data.success) {
				$("#passportTypeInput").val(data.extendData.passportType);
				$(".passportResult").text(getPassportStr(data.extendData.passportType));
				$("#passportNumber").val(data.extendData.passportNumber);
				$(".issueTime").text(data.extendData.issueTime||"请选择日期");
				$(".validTime").text(data.extendData.validTime||"请选择日期");
				$("#issuePlace").val(data.extendData.issuePlace);
				$("#issuingAuthority").val(data.extendData.issuingAuthority);
				$("#issuingAuthorityEnglish").val(data.extendData.issuingAuthorityEnglish);
			} else {
				mui.toast(data.message);
			}
		}
		$(".transaction-container").on("tap", "button", function() {
			var url = base.url.updateVisaApplyCustomerInfo;
			var params = {
				applyCustomerId: applyCustomerId,
				passportType: $("#passportTypeInput").text(),
				passportNumber: $("#passportNumber").val(),
				issueTime: $(".issueTime").text(),
				validTime: $(".validTime").text(),
				issuePlace: $("#issuePlace").val(),
				issuingAuthority: $("#issuingAuthority").val(),
				issuingAuthorityEnglish: $("#issuingAuthorityEnglish").val(),
			}
			base.postData(url, params, function(data) {
				mui.toast(data.message);
				if (data.success) {
					setTimeout(function(){
						mui.back();
					}, 1000);
				}
			});
		})
	</script>
</html>